<template>
  <view class="feedback">
    <view class="feedback-header">
      <image src="/static/feedback/feedbackBg.png" mode="widthFix" />
    </view>

    <!-- 问题内容 -->
    <view class="feedback-content bgRadius">
      <view class="feedback-content-item">
        <view class="homeTitle flex flex-align">
          <text></text>投诉内容
        </view>
        <view class="feedback-content-item-content">
          <textarea class="feedback-content-item-content-textarea" v-model="Infos.content" placeholder="请输入反馈内容"
            maxlength="800" />
        </view>
        <view class="example-body">
          <uni-file-picker v-model="imageValue" :image-styles="imageStyles" limit="3" fileMediatype="image" mode="grid"
            @select="select" @delete="deletes">
            <view class="upLoadImg flex flex-center flex-align">
              <view class="example-body__item__image">
                <image  src="/static/feedback/photo.png"  mode="scaleToFill"  />
                <view>上传凭证</view>
              </view>
            </view>
          </uni-file-picker>
        </view>
      </view>
    </view>
    <!-- 联系方式 -->
    <view class="feedback-contact bgRadius">
      <view class="homeTitle flex flex-align"><text></text>联系方式</view>
      <view class="feedback-contact-item">
        <view class="feedback-contact-item-input">
          <input type="text" v-model="Infos.phone" placeholder="请留下您的手机号，方便我们联系您" />
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="feedback-footer flex flex-center">
      <view class="btn blue-linear" @click="submitFeedback">提交</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { toast, uploadFile } from '@/utils';
import { reactive, ref } from 'vue';
import API_CENTER from '@/api/teamcenter'
const Infos = reactive({
    content: '',
    phone: '',
    image:'',
});

const imageValue = ref([]);
const imageStyles = {
  with: '180rpx',
  height: '180rpx',
  background: '#F5F6F7',
}

function submitFeedback() {
  // 提交反馈
  if(Infos.content == ''){
    uni.showToast({
      title: '请输入内容',
      icon: 'none',
      duration: 2000
    });
    return
  }
  if(Infos.phone == ''){
    uni.showToast({
      title: '请输入手机号',
      icon: 'none',
      duration: 2000
    });
    return
  }
  if(imageValue.value.length > 0){
    Infos.image = imageValue.value.join(',')
  }
  API_CENTER.complain(Infos).then((res: any) => {
    toast('投诉成功,请等待工作人员处理')
    setTimeout(() => {
      uni.navigateBack()
    }, 2000)
  })
}
const select = (e: any) => {
  uploadFile(e.tempFilePaths[0]).then((res: any) => {
    imageValue.value.push(res.url)
    console.log(imageValue.value)
  })
}
const deletes = (e: any) => {
  imageValue.value.splice(e.index, 1)
  console.log(imageValue.value)
}
</script>

<style scoped lang="scss">
.bgRadius{
  background: #fff;
  border-radius: 20rpx;
}
.feedback {
  .feedback-header {
    image {
      width: 100%;

    }
  }

  .feedback-type {
    margin: -140rpx 30rpx 30rpx;
    padding: 10rpx 30rpx 30rpx;
    position: relative;
    z-index: 11;

    .feedback-type-item {
      height: 70rpx;
      background: #F5F6F7;
      border-radius: 12rpx;
      margin-right: 2.5%;
      margin-bottom: 20rpx;
      color: #323233;
      font-size: 28rpx;
      width: 31%;
      border: 1px solid #F5F6F7;
    }

    .feedback-type-item-active {
      background: #FFE8DD;
      border: 1px solid #FE7431;
      color: #FE7431;
    }

    .feedback-type-item:nth-child(3n) {
      margin-right: 0rpx;
    }
  }

  .feedback-content {
    margin: -80rpx 30rpx 30rpx;
    padding: 30rpx;
    position: relative;
    z-index: 11;

    .homeTitle-right {
      font-size: 24rpx;
      font-weight: normal;
    }

    .feedback-content-item-content-textarea {
      color: #969799;
      font-size: 26rpx;margin-top: 20rpx;
    }

    .upLoadImg {
      text-align: center;
      width: 180rpx;
      height: 180rpx;
      background: #F5F6F7;

      image {
        width: 60rpx;
        height: 60rpx
      }
      view {
        font-size: 24rpx;
        color: #485172;
      }

    }
  }

  .feedback-contact {
    margin: 0 30rpx 30rpx;
    padding: 30rpx;
    position: relative;
    z-index: 11;

    .feedback-contact-item-input {
      input {
        width: 100%;
        height: 80rpx;
        font-size: 26rpx;

      }

    }
  }

  .feedback-footer {
    margin: 0rpx 0rpx 30rpx;
    text-align: center;
  }
}
</style>